<template>
	<view class="yyrji">
		<headertop title="用药日记" @xz="xz" :formattedDate="formattedDate" str="orderlist" str1="oridei" :back1="back1">
		</headertop>
		<image :src="_static('/images/Rectangle 2@2x(2).png')" class="yyrjiback">
		</image>
		<view :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="centerbox">
			<view class="msgtext">
				<image :src="_static('/images/Frame@2x(32).png')" class="icon" mode=""></image>
				<span>服药提醒仅供参考，服药时请尊医嘱</span>
			</view>
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext1">
					暂无内容
				</view>
			</view>
			<view class="yaopingss" v-for="(item,index) in  list" :key="item.id">
				<image :src="_static('/images/Mask group@2x(5).png')" class="wfhimg" mode=""></image>
				<view class="wufanq">
					{{item['usage_time_text']}}
				</view>
				<view class="centerbox1">
					<view class="topyaopinfo">
						<image :src="_static('/images/Group 10224@2x.png')" class="leftimg" mode="">
						</image>
						<view class="texts">
							<view class="t1">
								{{item['name']}}
							</view>
							<view class="t2">
								<view class="btn">
									{{item['usage_text']}}
								</view>
								<span>{{item.dose}}{{item['unit']}}</span>
							</view>
						</view>

					</view>
					<view class="bottomgnq">
						<view class="bianjitext" @click="gopage1(item)">
							<image :src="_static('/images/Frame@2x(33).png')" mode=""></image>
							<span>编辑</span>
						</view>
						<view class="ty" @click="ty(item,1)" v-if="item['is_stop']==0">
							停药
						</view>
						<view class="cxfyybtn" @click="ty(item,0)" v-if="item['is_stop']==1">
							重新服药
						</view>
						<view class="yyy" @click="swhitechange(0,item)" v-if="item['is_stop']==0&&item.already==1">
							<span style="margin-left: 16rpx;">已用药</span>
							<view class="redcue">
							</view>
						</view>
						<view class="yyy1" @click="swhitechange(1,item)" v-if="item['is_stop']==0&&item.already==0">
							<view class="redcue">
							</view>
							<span style="margin-right: 16rpx;">未用药</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<view class="fiexdbox" @click="gopage()">
			<view class="btn">
				添加药品
			</view>
		</view>
		<up-popup :show="show" mode="bottom">
			<view class="xuanxiang">
				<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
					取消
				</view>
				<view class="tt" style="font-weight: 600;">
					请选择日期
				</view>
				<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
					确认
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="valuedate"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
	</view>

</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	const show = ref(false)
	const active = ref(2)
	const date = new Date()
	const indicatorStyle = ref(`height: 50px;`)
	const years = []
	const datetime = ref('')
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	const valuedate = ref([9999, month - 1, day - 1])
	for (let i = 1900; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}
	const formattedDate = ref('')
	const list = ref([])
	onShow(() => {
		// 获取当前日期和时间
		const now = new Date();
		// 获取年月日
		const year = now.getFullYear();
		const month = now.getMonth() + 1; // 月份从0开始，需要+1
		const day = now.getDate();
		formattedDate.value = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
		init()
	})
	async function swhitechange(already, item) {
		const res = await $api.editMedicineRecord({
			date: formattedDate.value,
			plan_id: item.plan_id,
			already
		})
		if (res.code == 1) {
			item.already = already
			// init()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function ty(item, is_stop) {
		const res = await $api.editMedicinePlan({
			plan_id: item.plan_id,
			medicine_id: item.medicine_id,
			dose: item.dose,
			usage_time: item.usage_time,
			is_stop
		})
		if (res.code == 1) {
			item.is_stop = is_stop
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function init() {
		const res = await $api.medicineRecord({
			date: formattedDate.value
		})
		if (res.code == 1) {
			list.value = res.data
		}
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/bianjiyaop'
		})
	}

	function gopage1(item) {
		uni.navigateTo({
			url: '/sub_index/index/bianjiyaop?id=' + item.plan_id
		})
		uni.setStorageSync('itemobj1', item)
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})

	function xz() {
		show.value = true
	}

	function bindChange(e) {
		const val = e.detail.value
		datetime.value =
			`${years[val[0]]}-${months[val[1]]<10?'0'+months[val[1]]:months[val[1]]}-${days[val[2]]<10?'0'+days[val[2]]:days[val[2]]}`
	}

	function queding() {

		if (!datetime.value) {
			formattedDate.value =
				`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`
		} else {
			formattedDate.value = datetime.value
		}
		if (convertToTimestamp(formattedDate.value) > Date.now()) {
			formattedDate.value =
				`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`
			uni.showToast({
				title: '时间不能超过当前',
				icon: 'none'
			})
			return
		}
		show.value = false
		init()
	}

	function convertToTimestamp(dateStr) {
		return new Date(dateStr).getTime();
	}
</script>
<style lang="scss">
	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.cxfyybtn {
		width: 164rpx;
		height: 52rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 2rpx solid #F53F3F;
		text-align: center;
		line-height: 52rpx;
		color: #F53F3F;
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.fiexdbox {
		width: 100%;
		overflow: hidden;
		height: 186rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		position: fixed;
		bottom: 0%;

		.btn {
			width: 686rpx;
			height: 82rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 24rpx;
		}
	}

	.yyrji {
		width: 100%;
		overflow: hidden;
		position: relative;

		.yyrjiback {
			width: 100%;
			height: 450rpx;
			position: absolute;
			z-index: -1;
		}

		.centerbox {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 32rpx;

			.yaopingss {
				width: 686rpx;
				height: 244rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				position: relative;
				margin-bottom: 28rpx;

				.wfhimg {
					width: 138rpx;
					height: 152rpx;
					position: absolute;
					right: 0%;
					top: 0%;
				}

				.wufanq {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: absolute;
					text-align: center;
					width: 50px;
					top: 0%;
					right: 0.5%;
					top: 13%;
					rotate: 50deg;
				}

				.centerbox1 {
					width: 630rpx;
					margin: auto;
					overflow: hidden;

					.bottomgnq {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.ty {
							width: 162rpx;
							height: 52rpx;
							border-radius: 25rpx 25rpx 25rpx 25rpx;
							border: 2rpx solid #86909C;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
							text-align: center;
							line-height: 52rpx;
							margin-left: 178rpx;
						}

						.yyy1 {
							width: 162rpx;
							height: 52rpx;
							background: #C9CDD4;
							border-radius: 26rpx 26rpx 26rpx 26rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							margin-left: 32rpx;

							.redcue {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background: #fff;
								margin-left: 6rpx;
							}
						}

						.yyy {
							width: 162rpx;
							height: 52rpx;
							background: #2AB4F5;
							border-radius: 26rpx 26rpx 26rpx 26rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							margin-left: 32rpx;

							.redcue {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background: #fff;
								margin-right: 6rpx;
							}
						}

						.bianjitext {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
							white-space: nowrap;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}

					.topyaopinfo {
						width: 100%;
						height: 144rpx;
						border-bottom: 2rpx solid #F2F3F5;
						display: flex;
						align-items: center;

						.leftimg {
							width: 88rpx;
							height: 88rpx;
						}

						.texts {
							margin-left: 22rpx;
							overflow: hidden;

							.t1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
							}

							.t2 {
								display: flex;
								align-items: center;
								margin-top: 24rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #4E5969;

								.btn {
									width: 96rpx;
									height: 36rpx;
									background: #E8F3FF;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									text-align: center;
									line-height: 36rpx;
									font-size: 22rpx;
									color: #2AB4F5;
									margin-right: 16rpx;
								}
							}
						}
					}
				}
			}

			.msgtext {
				width: 100%;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0174AA;
				margin-bottom: 20rpx;

				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 4rpx;
				}
			}
		}
	}
</style>